<template>
  <div
    :style="getStyle"
    class="we-panel-item">
    <slot :width="currentWidth"/>
  </div>
</template>
<script>
import util from '@dataspherestudio/shared/common/util';
export default {
  props: {
    min: {
      type: [Number, String],
    },
    max: {
      type: [Number, String],
    },
    width: {
      type: [Number, String],
    },
    height: {
      type: [Number, String],
    },
    index: Number,
    disable: Boolean,
  },
  data() {
    return {
      parent: this.$parent,
      currentWidth: 0,
      currentHeight: 0,
      currentChange: 0,
      isFullScreen: false,
      isDiy: false,
      diyStyle: null,
    };
  },
  computed: {
    minSize() {
      let min = this.min;
      if (util.isString(min)) {
        min = Number(min);
      }
      if (min < 1) {
        let diretion = this.parent.diretion;
        if (diretion == 'horizontal') {
          min = this.parent.clientWidth * min;
        }
        if (diretion == 'vertical') {
          min = this.parent.clientHeight * min;
        }
      }
      return min;
    },
    maxSize() {
      let max = this.max;
      if (util.isString(max)) {
        max = Number(max);
      }
      if (max < 1) {
        let diretion = this.parent.diretion;
        if (diretion == 'horizontal') {
          max = this.parent.clientWidth * max;
        }
        if (diretion == 'vertical') {
          max = this.parent.clientHeight * max;
        }
      }
      return max;
    },
    cWidth() {
      let x = this.currentWidth + this.currentChange;
      return x;
    },
    cHeight() {
      return this.currentHeight + this.currentChange;
    },
    left() {
      return this.parent.getLeft(this.index);
    },
    top() {
      return this.parent.getTop(this.index);
    },
    getStyle() {
      let styleAttr;
      if (!this.isFullScreen) {
        let diretion = this.parent.diretion;
        if (diretion == 'horizontal') {
          styleAttr = {
            left: this.left + 'px',
            top: 0,
            bottom: 0,
            width: this.cWidth + 'px',
          };
        }
        if (diretion == 'vertical') {
          styleAttr = {
            top: this.top + 'px',
            left: 0,
            right: 0,
            height: this.cHeight + 'px',
          };
        }
      } else if (this.isDiy) {
        styleAttr = Object.assign({
          'position': 'fixed',
          'z-index': 100,
        }, this.diyStyle);
      } else {
        styleAttr = {
          'position': 'fixed',
          'left': 0,
          'right': 0,
          'top': 0,
          'bottom': 0,
          'z-index': 100,
        };
      }
      return styleAttr;
    },
  },
  watch: {
    height() {
      this.parent.initItem();
    },
    width() {
      this.parent.initItem();
    },
    cWidth() {
      this.$emit('on-change', {
        height: this.cHeight,
        width: this.cWidth,
      });
    },
    cHeight() {
      this.$emit('on-change', {
        height: this.cHeight,
        width: this.cWidth,
      });
    },
  },
  mounted() {
    this.parent.addItem(this);
  },
  beforeDestroy() {
    this.parent.removeItem(this);
  },
  methods: {
    fullScreen(option) {
      this.isDiy = option.isDiy;
      this.diyStyle = option.diyStyle;
      this.isFullScreen = true;
    },
    releaseFullScreen() {
      this.isFullScreen = false;
    },
  },
};
</script>
